<template>
  <div style="width: 96%; height: 300px; margin-left: 17px; margin-top: 30px">
    <div style="width: 100%; height: 200px">
      <el-table
        :data="tableData"
        background-color="cornsilk"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        stripe
      >
        <el-table-column prop="mname" label="电影名称" width="150px"> </el-table-column>
        <el-table-column prop="buyTime" label="购票时间" width="180px" sortable> </el-table-column>
        <el-table-column prop="price" label="价格(Y)" width="100px">
          <template #default="scope">
            <el-popover effect="light" trigger="hover" placement="top" width="auto">
              <template #default>
                <p>购票价格：{{ scope.row.price }}元，欢迎下次光临！</p>
              </template>
              <template #reference>
                <el-tag size="medium" type="danger">{{ scope.row.price }}元</el-tag>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" width="100px">
          <template #default="scope">
            <el-popover effect="light" trigger="hover" placement="top" width="auto">
              <template #default>
                <p>购票状态：{{ scope.row.ostate }}，请及时前往观影！</p></template
              >
              <template #reference>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium" type="warning">{{ scope.row.ostate }}</el-tag>
                </div>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="zw" label="座位" width="100px">
          <template #default="scope">
            <el-popover effect="light" trigger="hover" placement="top" width="auto">
              <template #default>
                <p>购票座位：{{ scope.row.orow }}排{{ scope.row.ocolumn }}列，感谢观影！</p>
              </template>
              <template #reference>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium" type="primary"
                    >{{ scope.row.orow }}排{{ scope.row.ocolumn }}列</el-tag
                  >
                </div>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="218px">
          <template #default="scope">
            <el-button type="success" @click="comments(scope.row.mname)">佳片评价</el-button>
            <el-button type="danger" @click="drop(scope.row.oid, scope.row.state)"
              >取消订单</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-top: 100px; float: bottom">
      <div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage5"
          :page-sizes="[5]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import router from '../../router';
const tableData = ref([]);
const tableAll = ref([]);
const userUid = ref();
const total = ref(0);
const currentPage5 = ref(1);
onMounted(() => {
  userUid.value = JSON.parse(sessionStorage.getItem('uid'));
  axios.get('api/order/getOrderHistory/' + userUid.value).then(res => {
    console.log(res.data);
    tableAll.value = res.data;
    total.value = tableAll.value.length;
    let len = tableAll.value.length > 5 ? 5 : tableAll.value.length;
    for (let i = 0; i < len; i = i + 1) {
      tableData.value.push(tableAll.value[i]);
    }
  });
});
const handleCurrentChange = val => {
  tableData.value = [];
  currentPage5.value = val;
  let index = (val - 1) * 5;
  let len = total.value - index > 5 ? 5 : total.value - index;

  for (let i = 0; i < len; i = i + 1) {
    tableData.value.push(tableAll.value[index + i]);
  }
};
const comments = mname => {
  sessionStorage.setItem('movieInfo', JSON.stringify(mname));
  router.push('/movieInfo');
};
const drop = (oid, state) => {
  if (state === '未过期') {
    axios
      .get('api/order/quit', {
        params: {
          oid: oid,
        },
      })
      .then(res => {
        if (res.data === 'OK') {
          alert('订单取消成功1');
          router.go(0);
        }
      });
  } else {
    alert('该电影已开始放映，无法取消订单！');
  }
};
</script>
